<template>
	<view>
		<u-navbar :isBack="false" title="通知" title-color="#101010"></u-navbar>

		<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
		<view class="item-notice" style="border-bottom: 1px solid #f5f5f5;">
			<image src="@/static/message/tongzhi.png" mode="widthFix" style="width: 80rpx;margin-right: 24rpx;"></image>
			<view style="flex: 1;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="title">系统通知</view>
					<view style="font-size: 24rpx;">8-2</view>
				</view>
				<view class="u-m-t-8 secondary-text">最新消息</view>
			</view>
		</view>
		
		<view class="item-notice">
			<image src="@/static/message/order.png" mode="widthFix" style="width: 80rpx;margin-right: 24rpx;"></image>
			<view style="flex: 1;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view class="title">订单通知</view>
					<view style="font-size: 24rpx;">8-2</view>
				</view>
				<view class="u-m-t-8 secondary-text">最新消息</view>
			</view>
		</view>
		
		<u-tabbar v-model="current" :list="tabbar" active-color="#0daff0"  :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	import { getTabbarConfig } from '@/common/tabbar';
	import configApi from 'utils/config.js'
	// import { userApi } from '@/common/user.js';
export default {
	name: "NoticeList",
	data() {
		return {
			current: 3,
			tabbar: getTabbarConfig(true),
			dataList: [],
		};
	},
	methods: {
		isRead(e){
			let self = this;
			userApi.readNotice({id:e}).then(res => {
				// self.queryList(1,10);
				console.log(res)
				uni.navigateTo({
					url: '/pages/users/Payment?orderId='+res+'&filter=all',
				});
			});
		},
		formatDateTime(date, format) {
			const o = {
				'M+': date.getMonth() + 1, // 月份
				'd+': date.getDate(), // 日
				'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12, // 小时
				'H+': date.getHours(), // 小时
				'm+': date.getMinutes(), // 分
				's+': date.getSeconds(), // 秒
				'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
				S: date.getMilliseconds(), // 毫秒
				a: date.getHours() < 12 ? '上午' : '下午', // 上午/下午
				A: date.getHours() < 12 ? 'AM' : 'PM', // AM/PM
			};
			if (/(y+)/.test(format)) {
				format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
			}
			for (let k in o) {
				if (new RegExp('(' + k + ')').test(format)) {
				format = format.replace(
					RegExp.$1,
					RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
				);
				}
			}
			return format;
		},
		queryList(pageNo, pageSize) {
			console.log(pageNo, pageSize);
			let self = this;
			console.log(pageNo, pageSize);
			let sbumData = {};
			sbumData.page = pageNo;
			userApi.listNotice({page: pageNo, class: '1'}).then(res => {
				// console.log(res,'22222')
				this.$refs.paging.complete(res);
			});
		},
	},
};
</script>

<style lang="scss" scoped>
	.item-notice {
		margin: 22rpx;
		padding: 28rpx;
		display: flex;
		align-items: center;
		
		.title {
			font-size: 28rpx;
			font-weight: bold;
		}
		.secondary-text {
			font-size: 24rpx;
			color: #666;
		}
	}
</style>
